var sun = new Image()
var moon = new Image()
var earth = new Image()
function init () {
  sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png' // 300*300
  moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png' // 24*24
  earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png' // 7*7
  window.requestAnimationFrame(draw)
}

function draw () {
  var ctx = document.getElementById('canvas').getContext('2d')

  ctx.globalCompositeOperation = 'destination-over'
  ctx.clearRect(0, 0, 300, 300) // clear canvas

  ctx.fillStyle = 'rgba(0,0,0,0.4)'
  ctx.strokeStyle = 'rgba(0,153,255,0.4)'
  ctx.save()
  ctx.translate(150, 150)

  // Earth
  var time = new Date()
  ctx.rotate(
    ((2 * Math.PI) / 60) * time.getSeconds() +
      ((2 * Math.PI) / 60000) * time.getMilliseconds()
  )
  ctx.translate(105, 0)
  // ctx.fillRect(0, -12, 50, 24) // Shadow
  ctx.drawImage(earth, -12, -12)

  // Moon
  ctx.save()
  // ctx.rotate(
  //   ((2 * Math.PI) / 6) * time.getSeconds() +
  //     ((2 * Math.PI) / 6000) * time.getMilliseconds()
  // )
  // ctx.translate(0, 28.5)
  // ctx.drawImage(moon, -3.5, -3.5)
  ctx.restore()
  // 为什么要运行两遍？因为save 了两遍
  ctx.restore()

  ctx.beginPath()
  ctx.arc(150, 150, 105, 0, Math.PI * 2, false) // Earth orbit
  ctx.stroke()

  // ctx.drawImage(sun, 0, 0, 300, 300)

  window.requestAnimationFrame(draw)
}

init()
